<template>
  <div class="header">
    <ArrowLeftOutlined style="cursor: pointer" @click="backHome" />
    <div class="title">
      {{ title }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';

withDefaults(
  defineProps<{
    title?: string;
  }>(),
  {
    title: ''
  }
);

const router = useRouter();
const backHome = () => {
  router.back();
  globalThis.api.setWindowSize();
};
</script>
<style scoped lang="less">
.header {
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #fff;
  .title {
    width: 100%;
    height: 100%;
    -webkit-app-region: drag;
  }
}
</style>
